<template>
    <div 
        class="grid grid-cols-5 grid-rows-2 gap-2 px-4 pt-6 text-sm font-medium text-center text-gray-500 bg-white">
        <RouterLink v-for="(item, index) in categorys" :to="{
            name: 'shop-category',
            params: {
                id: index
            }
        }">
            <div class="grid mt-2 place-content-center">
                <div><img :src="item.src" class="object-cover w-10 h-10" /></div>
                <div class="mt-2">{{ item.name }}</div>
            </div>
        </RouterLink>
    </div>
</template>
    
<script setup lang='ts'>

import c1 from '~/assets/shop/categorys/1.png'
import c2 from '~/assets/shop/categorys/2.png'
import c3 from '~/assets/shop/categorys/3.png'
import c4 from '~/assets/shop/categorys/4.png'
import c5 from '~/assets/shop/categorys/5.png'
import c6 from '~/assets/shop/categorys/6.png'
import c7 from '~/assets/shop/categorys/7.png'
import c8 from '~/assets/shop/categorys/8.png'
import c9 from '~/assets/shop/categorys/9.png'
import c10 from '~/assets/shop/categorys/10.png'

const categorys = [
    { name: '主食', src: c1, },
    { name: '零食', src: c2, },
    { name: '保健', src: c3, },
    { name: '护理', src: c4, },
    { name: '日用', src: c5, },
    { name: '服饰', src: c6, },
    { name: '医疗', src: c7, },
    { name: '玩具', src: c8, },
    { name: '美容', src: c9, },
    { name: '周边', src: c10, },
]
</script>
    
<style></style>